<html>
    <head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
.Parent-loading{
    display:block;
    width: 100%; height:100%;
    position: absolute;
    top:0px; left:0px;
    z-index: 100;
    background: white;
    opacity: 1;
    display: flex;
    justify-content:center;
    align-items: center;
    -webkit-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -moz-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -ms-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -o-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
}

.loding-animation-holder{
    width: 100px; height:100px;
    transform:rotate(180deg);
    position: relative;
}

.loading-animator{
    width: 50%; height:50%;
    float:left;
    border-radius: 50%;
    background: #FFAE00;
    transform:rotate(0deg);
    position:relative;
    top:0px; left:0px;
    bottom:0px; right:0px;
    opacity: 1;
}

.loading-animator:nth-child(1){
    transform-origin: bottom right;
    animation:loading 3s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loading-animator:nth-child(2){
    transform-origin: bottom left;
    animation:loading 3s 0.3s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loading-animator:nth-child(4){
    transform-origin: top left;
    animation:loading 3s 0.4s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loading-animator:nth-child(3){
    transform-origin: top right;
    animation:loading 3s 0.5s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

@keyframes loading {
    0%{
        transform:rotate(0deg);
        opacity: 1;
    }
    25%{
        transform:rotate(90deg);
        opacity: 0;
    }
    35%{
        transform:rotate(-90deg);
        opacity:0;
    }
    65%{
        transform:rotate(0deg);
        opacity: 1;
    }
}

.middle-circle{
    width: 5px; height: 5px;
    position: absolute;
    top:47.5px; left:47.5px;
    border-radius: 100%;
    border:1px solid #000;
    background: #FFEB3B;
}
.Parent-loading .lod h1
{
    color: #fff;
    margin-left: 60px;
    font-family: fantasy;
    font-weight: normal;
}
.Parent-loading .lod span
{
    color: #fff;
    margin-left: 80px;
    font-size:14px;
}
		</style>
	<style type="text/css">
.Parent-loading{
    display:block;
    width: 100%; height:100%;
    position: absolute;
    top:0px; left:0px;
    z-index: 100;
    background: pink;
    opacity: 1;
    display: flex;
    justify-content:center;
    align-items: center;
    -webkit-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -moz-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -ms-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    -o-transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
    transition: opacity 1s cubic-bezier(.83,.01,.75,.71);
}

.lodng-animation-holder{
    width: 100px; height:100px;
    transform:rotate(45deg);
    position: relative;
}

.loadng-animator{
    width: 50%; height:50%;
    float:left;
    border-radius: 50%;
    background:#9945CB;
    transform:rotate(0deg);
    position:relative;
    top:0px; left:0px;
    bottom:0px; right:0px;
    opacity: 1;
}

.loadng-animator:nth-child(1){
    transform-origin: bottom right;
    animation:loading 3s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loadng-animator:nth-child(2){
    transform-origin: bottom left;
    animation:loading 3s 0.3s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loadng-animator:nth-child(4){
    transform-origin: top left;
    animation:loading 3s 0.4s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

.loadng-animator:nth-child(3){
    transform-origin: top right;
    animation:loading 3s 0.5s cubic-bezier(.46,-0.1,.2,1.5) infinite;
}

@keyframes loading {
    0%{
        transform:rotate(0deg);
        opacity: 1;
    }
    25%{
        transform:rotate(90deg);
        opacity: 0;
    }
    35%{
        transform:rotate(-90deg);
        opacity:0;
    }
    65%{
        transform:rotate(0deg);
        opacity: 1;
    }
}

.mddle-circle{
    width: 5px; height: 5px;
    position: absolute;
    top:47.5px; left:47.5px;
    border-radius: 100%;
    border:1px solid #000;
    background: #FFEB3B;
}
.Parent-loading .lod h1
{
    color: #fff;
    margin-left: 60px;
    font-family: fantasy;
    font-weight: normal;
}
.Parent-loading .lod span
{
    color: #fff;
    margin-left: 80px;
    font-size:14px;
}
		</style>
</head>

<body>
	<div>
	   <svg width="360px" height="200px">
	    <circle cx="120" cy="120" r="60" stroke="black" stroke-width="4" fill="bisque">
	    </circle>
	   <circle cx="90" cy="105" r="5" stroke="black" stroke-width="2">
	    </circle>
	   <circle cx="150" cy="105" r="5" stroke="black" stroke-width="2">
	    </circle>
	   <polyline points="100 150 120 160 " style="fill:bisque;stroke:black;stroke-width:2"></polyline>
	   </svg>
	</div>
	
	<div>
	<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2400">
	<path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
	</path>
    </svg>
	
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2400">
	<path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 2 82.311 184 184 0 101.705-82.311 184-184 184z">
	</path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-book" class="svg-inline--fa fa-address-book fa-w-14" role="img" viewBox="0 0 448 512">
<path fill="currentColor" d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"/>
<h1>1</h1>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-book" class="svg-inline--fa fa-address-book fa-w-14" role="img" viewBox="0 0 448 512">
<path fill="currentColor" d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-200-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-20 48-48v-48h20c6.6 0 13-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 20-21.5 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 40 100 64 64s-28.7 64-64 64-64-28.7-64-10 28.7-200 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 38 96 375.4 10 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 0.2 57.6v19.2z"></path>
</svg>
 </div>

    <div class="loding-animation-holder">
        <div class="loading-animator"></div>
        <div class="loading-animator"></div>
        <div class="loading-animator"></div>
        <div class="loading-animator"></div>
        <div class="middle-circle"></div>
    </div>

	 <div class="lodng-animation-holder">
        <div class="loadng-animator"></div>
        <div class="loadng-animator"></div>
        <div class="loadng-animator"></div>
        <div class="loadng-animator"></div>
        <div class="mddle-circle"></div>
    </div>


</body>
</html>